<template>
  <div class="through_pass_success" :id="id">
  </div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "ThroughPassSuccessful",
    data(){
      return {
        id:Math.random().toString(36).substr(2)
      }
    },
    props:{
      recoveriesData:{
        type: Array
      },
      recoveries:{
        type:Number
      }
    },
    mounted() {
      // const data = [{"Goals":0,"number":479},{"Goals":0.1,"number":2},{"Goals":0.2,"number":24},{"Goals":0.3,"number":31},{"Goals":0.4,"number":18},{"Goals":0.5,"number":12},{"Goals":0.6,"number":8},{"Goals":0.7,"number":4},{"Goals":0.8,"number":7},{"Goals":0.9,"number":5},{"Goals":1,"number":1},{"Goals":1.2,"number":1},{"Goals":1.3,"number":1},{"Goals":1.4,"number":1},{"Goals":1.5,"number":1},{"Goals":1.6,"number":1},{"Goals":1.7,"number":2},{"Goals":1.8,"number":1},{"Goals":3.6,"number":2},{"Goals":5.3,"number":1}];
      const data =  [
        {
          "tpa": 0,
          "number": 419
        },
        {
          "tpa": 0.01,
          "number": 10
        },
        {
          "tpa": 0.02,
          "number": 8
        },
        {
          "tpa": 0.03,
          "number": 9
        },
        {
          "tpa": 0.04,
          "number": 15
        },
        {
          "tpa": 0.05,
          "number": 6
        },
        {
          "tpa": 0.06,
          "number": 11
        },
        {
          "tpa": 0.07,
          "number": 3
        },
        {
          "tpa": 0.08,
          "number": 4
        },
        {
          "tpa": 0.09,
          "number": 1
        },
        {
          "tpa": 0.1,
          "number": 1
        },
        {
          "tpa": 0.12,
          "number": 1
        },
        {
          "tpa": 0.14,
          "number": 1
        },
        {
          "tpa": 0.15,
          "number": 1
        },
        {
          "tpa": 0.19,
          "number": 1
        }
      ]
      // const data = this.recoveriesData;
      const column = new Column(this.id, {
        data,
        width: 200,
        height: 150,
        meta:{
          tpa: {
            alias:'传中成功',
            formatter:(v)=>{
              return v + '次'
            }
          },
          number: {
            alias:'球员人数',
            formatter:(v)=>{
              return v + '人'
            }
          },
        },
        xField: 'tpa',
        yField: 'number',
        xAxis: {
          label: {
            formatter:(tpa)=>{
              if(tpa==='0.19次') {
                return tpa.slice(0,tpa.length-1)
              }
              return null
            },
            autoHide:false,
            autoRotate: false,
            // position:'left'
          },
          tickLine:null,
          title:null,
          line:null,
          subTickLine:null,
          grid:null,
        },
        yAxis:{
          label:{
            formatter:(number)=>{
              return parseFloat(number)
            },
          },
          title:null,
        },
        // title: {
        //   visible: true,
        //   text: '直传成功/90',
        //   style:{
        //     fontSize: 14,
        //     fill: 'red',
        //   }
        // },
        // colorField: 'tpa',
        // 如果需要特殊对某个值设置颜色就不能够设置colorField
        color:({tpa})=>{
          if(tpa === 0.02){
            return '#29a5da';
          }
          return '#DCF1FA';
        },
        columnStyle:{

        },
        minColumnWidth: 2,
        maxColumnWidth:50,
        // columnSize:15,
        columnWidthRatio:1,
        legend:{
          visible: false
        },
        tooltip:{
          fields:['tpa','number',],
          domStyles:{
            'g2-tooltip':{
              width: '150px',
              height:'60px'
            },
            'g2-tooltip-title':{
              display:'none'
            },
            'g2-tooltip-list-item':{
              width:'150px',
              // height:'30px',
              display: 'flex',
              justifyContent:'flexStart'
            },
            'g2-tooltip-marker':{
              marginTop:'3px'
            }
          },
        },
      });
      column.render();
    }
  }
</script>

<style scoped>
  .through_pass_success {
    margin-top: -1px;
    width: 240px;
    height: 180px;
  }
</style>